<template>
	<view>
		<view class="orderInfo">
			<u-cell-group>
				<u-cell  title="可退款金额" :value="orderInfo.actual"></u-cell>
				<view class="rule">
					（退款金额 = 实际支付金额－已使用优惠金额）
				</view>
				<u-cell  title="订单号" :value="orderInfo.orderno"></u-cell>
				<!-- <u-cell  title="退款状态" v-if="orderInfo.status == 1" value="待审核"></u-cell>
				<u-cell  title="退款状态" v-if="orderInfo.status == 2" value="已退款"></u-cell>
				<u-cell  title="退款状态" v-if="orderInfo.status == 3" value="已驳回"></u-cell> -->
			</u-cell-group>
		</view>
		<view class="" v-if="orderInfo.is_goods == 1">
			<view class="goods-box">
				<img style='width: 200rpx;height: 200rpx;' :src="IMG_URL + goods.image" alt="">
				<view class="goods-text-content">{{text}}</view>
			</view>
			<!-- <view class="goods-text">
				<view class="goods-text-content">{{text}}</view>
			</view> -->
		</view>
		<view class="textarea">
			<view class="textarea-title">
				请填写退款理由:
			</view>
			<!-- <u--textarea v-model="value1" placeholder="请填写退款理由"></u--textarea> -->
			<textarea v-model="value1" placeholder="请填写退款理由" ></textarea>
		</view>
		<view class="button">
			<u-button type="primary" shape="circle" color="#F12F63;" @click="getMemberRefund" text="申请退款"></u-button>
		</view>
	</view>
</template>

<script>
	import api from "@/api/order.js"
	export default {
		data() {
			return {
				value1: '',
				IMG_URL: "",
				orderInfo: {
					orderno:'',
					actual:'',
					is_goods:''
				},
				goods:{
					name:'',
					image:''
				},
				text:'订单含有实物礼品，请将您的礼品退回购买油站，由加油员核实后通过审核'
			}
		},
		onLoad(options) {
			this.IMG_URL = this.$IMG_URL;
			console.log(options.actual);
			// this.getMemberRefundDetail(options.orderno);
			this.orderInfo.orderno = options.orderno
			this.orderInfo.actual = options.actual
			this.orderInfo.is_goods = options.is_goods
			this.goods.name = options.name
			this.goods.image = options.image
			console.log(options);
		},
		methods: {
			// getMemberRefundDetail(orderno) {
			// 	api.getMemberRefundDetail({
			// 		orderno:orderno
			// 	}).then(res => {
			// 		if (res.code == 1) {
			// 			this.orderInfo == res.data
			// 		}
			// 	})
			// },
			getMemberRefund() {
				api.getMemberRefund({
					orderno:this.orderInfo.orderno,
					amount:this.orderInfo.actual,
					remark:this.value1
				}).then(res => {
					if (res.code == 1) {
						uni.showToast({
							title:"申请成功",
							icon:"success",
						})
						setTimeout(() => {
							uni.navigateBack({
								delta: 1,
							});
						}, 1500)
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.textarea {
		width: 90%;
		margin: 20rpx auto;

		.textarea-title {
			margin-bottom: 15rpx;
		}
	}

	.button {
		width: 90%;
		margin: 20rpx auto;
	}
	.goods-box{
		width: 90%;
		margin: 20rpx auto;
		display: flex;
		justify-content: space-between;
		img{
			width: 200rpx;
			height: 200rpx;
			// margin-right: 20rpx;
		}
		.goods-text-content{
			width: calc(100% - 220rpx);
			// margin:20rpx auto 0;
			// margin-left: 20rpx;
			font-size: 28rpx;
			color: #F12F63;
		}
	}
	// .goods-text{
	// 	border-top: 1rpx solid rgb(218, 219, 222);
	// 	.goods-text-content{
	// 		width: 90%;
	// 		margin:20rpx auto 0;
	// 		font-size: 28rpx;
	// 		color: #F12F63;
	// 	}
	// }
	.rule{
		position: absolute;
		top:60rpx;
		left: 15rpx;
		font-size: 22rpx;
		color: #F12F63;
	}
</style>
